<template>
  <div>
    <div style="text-align: right;padding-right: 20px;" v-if="dynamic">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="addFn">添 加</el-button>
      <el-button type="danger" size="small" icon="el-icon-delete" plain  @click="handleDelete">删 除</el-button>
    </div>
    <el-table :data="data" style="width: 100%" @selection-change='getSelection'>

      <el-table-column
       type="selection"
       width="55"
       v-if="dynamic"
      >
    </el-table-column>
      <el-table-column :prop="item.prop" :label="item.name" v-for="(item, index) in column" :key="index"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100"  v-if="dynamic">
        <template slot-scope="scope">
          <!-- <el-button type="text" size="small" @click='edit(scope.row)'>编辑</el-button> -->
          <el-button type="text" size="small" @click='rowDeleteClick(scope.row)'>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <slot name="form"></slot>
  </div>
</template>

<script>
export default {
  name: 'tableList',
  props: ['column', 'data', 'dynamic'],
  data(){
    return {
      selectionList:[]
    }
  },
  methods: {
    addFn() {
       this.$emit('handleAddClick');
    },
    edit(row){
       this.$emit('handleEditClick',row);
    },
    getSelection(selection){
        this.selectionList=selection;
    },
    handleDelete(){
        this.$emit('handleDeleteClick',this.selectionList);
    },
    rowDeleteClick(row){
        this.$emit('rowDeleteClick',row);
    }
  }
};
</script>

<style></style>
